body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/**********/
/* Farben */
/**********/
:root {
	--fjordsoft-blue        : rgba(1, 65, 109);
	--fjordsoft-blue-opax   : rgba(1, 65, 109, 0.25);
	--fjordsoft-green       : rgba(0, 146, 63);
	--fjordsoft-green-opax  : rgba(0, 146, 63, 0.25);
	--inverse: #ffffff;
	
	--clr                   : var(--fjordsoft-blue);
	--clr-header	        : var(--fjordsoft-blue);
	--clr-footer        	: var(--fjordsoft-blue);
	
	--bg                    : rgba(209,220,237); /*#d1dced;*/
	--bg-header         	: var(--fjordsoft-green-opax);
	--bg-footer         	: var(--fjordsoft-green-opax);
	
	--bg-transparent		: #00000000;

/******************/
/* Schrift Größen */
/******************/

	--fs-100            	: clamp(0.89rem, 0.25vw + 0.81rem, 1rem);
	--fs-200            	: clamp(1rem, 0.56vw + 0.83rem, 1.25rem);
	--fs                	: var(--fs-200);
	--fs-small          	: var(--fs-100);


/**************/	
/* FONAWESOME */
/**************/	

	--awefontfamily				: "Font Awesome 7 Free";
	
	--extern-link-icon			: "\f08e";
	--phone-icon				: "\f095";
	--copyright-icon			: "\f1f9";
	--trademark-icon			: "\f25d";
	--at-icon                   : "\40";
	--bars-icon                 : "\f0c9";
}
/* ibm-plex-sans-arabic-regular - latin */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: local('IBM Plex Sans Arabic'),
           url('/assets/webfonts/ibm-plex-sans-arabic-v15-latin-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
p {
    margin: 0;
    padding: 0;
    text-align: left;
}
h1, h2, h3 {
    -webkit-hyphens: auto; 
    hyphens: auto; 
}
a {
    text-decoration: none;
    color: var(--fjordsoft-blue);
}
.header, .seite, .footer {
    font-family: 'IBM Plex Sans Arabic';
    font-weight: normal;
    font-size: clamp(0.6rem, calc(0.6rem + 1.136cqw), 1.0rem);
    color: var(--fjordsoft-blue);
}
.extlink::after {
    content: var(--extern-link-icon);
    font: var(--fa-font-solid);
}

/* Wraper */
#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    background: var(--bg);

    display: grid;

    min-height: 100vh;
    @supports (min-height: 100dvh) {
        min-height: 100dvh;
    }

    grid-template-rows: min-content 1fr min-content;
    grid-template-areas:
        "header"
        "container"
        "footer";
}

/* Header */
header {
    grid-area: header;
}

/* Container */
#container {
    grid-area: container;
}

/* Footer */
footer {
    grid-area: footer;
}

/* header */
header {
    position: fixed;
    top: 0;
    left: 10%;
    right: 10%;

    padding: 0;
    background: white;
    font-weight: bold;
    z-index: 1000;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 5px 0 var(--fjordsoft-green-opax);
}

.h-k-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "telefon fernwartung";
    gap: 0;
    background: var(--bg-header);
}
.telefon {
    grid-area: telefon;
    justify-self: center;
}
.telefon::before {
    content: var(--phone-icon);
    font: var(--fa-font-solid);
}
.extlink {
    grid-area: fernwartung;
    justify-self: center;
}
/*
.extlink::after {
    content: var(--extern-link-icon);
    font: var(--fa-font-solid);
}
*/
.h-l-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "h-logo h-nav";
    gap: 0;
    background: white;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 -2px 5px 0 var(--fjordsoft-green-opax);
}
.logo {
    grid-area: h-logo;
    padding: 5px 5px 5px 100px;
}  
.h-nav {
    grid-area: h-nav;
    justify-self: end;
    padding-right: 5px
}

@media (max-width: 900px) {
    header {
        margin: 0;
        left: 0;
        right: 0;
    }
    .logo {
        padding: 5px 5px 5px 5px;
    }
    .h-k-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "telefon";
    }
    .extlink{
        display: none;
    }
}

/* hauptseite */
#container {
    margin: 70px 5px 5px 5px;
}
picture > img {
    margin-right: 5px;
    border: 5px solid var(--fjordsoft-green-opax);
    border-radius: 5px;
}

/*
.startcard-grid {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    grid-auto-rows: minmax(auto, 1fr);
    justify-content: space-around;
    align-content: space-around;
    gap: 10px;
}
.startcard {
    padding: 5px 20px 5px 20px;
    background: white;
    text-align: left;
    border: 5px solid var(--fjordsoft-blue-opax);
    border-radius: 10px;
}
.itcard-grid {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    grid-auto-rows: minmax(auto, 1fr);
    justify-content: space-around;
    align-content: space-around;
    gap: 10px;
}
.itcard {
    padding: 5px 20px 5px 20px;
    background: white;
    text-align: left;
    border: 5px solid var(--fjordsoft-blue-opax);
    border-radius: 10px;
}
.maincard-grid {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    grid-auto-rows: minmax(auto, 1fr);
    justify-content: space-around;
    align-content: space-around;
    gap: 10px;
}
.maincard {
    padding: 5px 20px 5px 20px;
    background: white;
    text-align: left;
    border: 5px solid var(--fjordsoft-blue-opax);
    border-radius: 10px;
}
*/
@media (min-width: 400px) {
    #container {
        margin: 80px 5px 5px 5px;
    }
}
@media (min-width: 900px) {
    #container {
        margin: 80px 20% 5px 20%;
    }
}

/* footer */
footer {
    margin: 0;
    padding: 5px;
    font-weight: bold;
    background: var(--fjordsoft-green-opax);
    border-radius: 10px 10px 0 0;
}
.info-grid {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    justify-content: space-around;
    align-content: space-around;
    align-items: stretch;
    gap: 5px;
}
.infocard {
    margin: 10px;
    padding: 5px;
    border: 5px solid var(--bg);
    border-radius: 10px;
    justify-content: center;
    align-content: center;
}
.anschrift, .telefonzeiten, .werkstattzeiten, .footer-nav {
    width: fit-content;
    margin: 0 auto;
}
.footertelefon::before {
    content: var(--phone-icon);
    font: var(--fa-font-solid);
}
.footermail::before {
    content: var(--at-icon);
    font: var(--fa-font-solid);
}
@media (min-width: 500px) {
    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 900px) {
    footer {
        margin-left: 10%;
        margin-right: 10%;
    }
    .info-grid {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}